<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 @scroll="scroll">
      <!-- 金银币明细 -->
      <div class="top">
        <div class="nav">
          <img :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/ic_back_white%403x.png'"
               alt
               class="backBtn"
               @click="backBtn" />
        </div>
        <div class="jbbox jbbox1">
          <div class="jb_left">
            <p class="p1">总金币</p>
            <span class="jb_total">{{list.all_gold?list.all_gold:0}}</span>
          </div>
          <div class="jb_right">
            <div class="box box1">
              <p class="p1">
                金币
                <img :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/gold.png'"
                     alt
                     class="icon icon1" />
              </p>
              <div class="num">{{list.user_gold?list.user_gold:0}}</div>
              <div class="btn"
                   @click="to_cashOut">去提现</div>
            </div>
            <div class="box box2">
              <p class="p1">
                待返金币
                <img :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/gold.png'"
                     alt
                     class="icon" />
              </p>
              <div class="num">{{list.un_send_gold?list.un_send_gold:0}}</div>
              <div class="btn"
                   @click="to_speed">去提速</div>
            </div>
          </div>
        </div>
        <div class="jbbox">
          <div class="jb_left">
            <p class="p1">总银币</p>
            <span class="jb_total">{{list.all_silver?list.all_silver:0}}</span>
          </div>
          <div class="jb_right">
            <div class="box box1">
              <p class="p1">
                银币
                <img :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/silver.png'"
                     class="icon icon1" />
              </p>
              <div class="num">{{list.user_silver?list.user_silver:0}}</div>
              <div class="btn"
                   @click="exchange">去兑换</div>
            </div>
            <div class="box box2">
              <p class="p1">
                待返银币
                <img :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/silver.png'"
                     class="icon" />
              </p>
              <div class="num">{{list.un_send_silver?list.un_send_silver:0}}</div>
              <div class="btn"
                   @click="to_speed">去提速</div>
            </div>
          </div>
        </div>
      </div>
      <ul class="ul_box">
        <li class="row">
          <a href="/pages/package_mine/plus_speed/main">
            <img :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/ic_subsidy.png'"
                 alt
                 class="icon icon1" />
            我的补贴单

            <span class="speed_btn">PLUS补贴单提速</span>
            <img src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/xiayibu@2x.png"
                 alt
                 class="icon_right" />
          </a>
        </li>
        <li class="row">
          <a href="/pages/package_mine/point_detail/main">
            <img :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/ic_currency.png'"
                 alt
                 class="icon icon2" />
            金银币明细
          </a>
        </li>
        <li class="row">
          <a href="/pages/package_mine/card_centry/main">
            <img :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/ic_ticket.png'"
                 alt
                 class="icon icon3" />我的卡券
          </a>
        </li>
        <li class="row">
          <a href="/pages/package_mine/my_card_new/main">
            <img :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/ic_card.png'"
                 alt
                 class="icon icon4" />
            我的银行卡
          </a>
        </li>
      </ul>
      <div class="banner">
        <swiper :indicator-dots="false"
                :autoplay="true"
                :interval="2000"
                :duration="500"
                indicator-color="rgba(255, 255,255,.5)"
                indicator-active-color="rgba(255, 255,255,1)">
          <block v-for="(item, index) in list.wallet_pics"
                 :key="index">
            <swiper-item @click="to_detail(item)">
              <img v-if="imgUrl&&item.image"
                   :src="imgUrl+item.image"
                   class="slide-image" />
            </swiper-item>
          </block>
        </swiper>
      </div>
      <div class="tip1">
        <div v-html="list.wallet_note"></div>
      </div>
      <!-- 弹窗 -->
      <div class="mask"
           v-if="ismask"></div>
      <div class="Popup"
           v-if="isPopup">
        <div class="title">
          金银币兑换
          <span class="closeBtn"
                @click="closeBtn">×</span>
        </div>
        <div class="describe">当前钱包金币{{list.user_gold?list.user_gold:0}}，请输入想兑换的金币，兑换成功后无法撤销。</div>
        <span class="tips"
              v-if="jb_num > maxGold">不可大于当前钱包金币数额</span>
        <div class="jb_inp jb_inp1">
          <img :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/gold.png'"
               alt
               class="icon" />金币
          <input type="number"
                 class="inp"
                 v-model="jb_num"
                 @focus="focusfns"
                 @input="get_gold" />
        </div>
        <div class="jb_inp">
          <img :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/silver.png'"
               alt
               class="icon" />银币
          <input type="number"
                 class="inp inp1"
                 disabled
                 v-model="yb_num" />
        </div>
        <div class="confirm"
             @click="sendEvent">确认兑换</div>
      </div>
      <div class="Popup msg_Popup"
           v-if="msgPopup">
        <div class="title">
          扣除金银币验证
          <span class="closeBtn"
                @click="closeBtn">×</span>
        </div>
        <div class="describe">验证码已经发送至尾号{{phone}}手机</div>
        <span class="sendBtn"
              @click="sendMore">{{sendMsg}}</span>
        <div class="inpbox"
             :class="errTip?'':'p2'">
          <div class="code-input-main-item">{{code[0]}}</div>
          <div class="code-input-main-item">{{code[1]}}</div>
          <div class="code-input-main-item">{{code[2]}}</div>
          <div class="code-input-main-item">{{code[3]}}</div>
          <div class="code-input-main-item">{{code[4]}}</div>
          <div class="code-input-main-item">{{code[5]}}</div>
          <input class="code-input-input"
                 v-model="code"
                 maxlength="6"
                 type="number"
                 @input="getCode" />
          <!-- </div> -->
        </div>

        <div class="text"
             v-show="errTip">请输入正确验证码</div>
        <div class="p1">金银币会扣除补贴单待返金额，扣除后补贴单会重新计算</div>
      </div>
    </scroll-view>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      list: "",
      coin: 0,
      total_already_credit: 0, //累计提现
      ismask: false,
      isPopup: false,
      msgPopup: false,
      jb_num: 0, //金币数
      yb_num: 0, //银币数
      maxGold: 0, //最大金币值
      sendMsg: "获取验证码",
      tel: "",
      interval: "",
      errTip: false,
      phone: "", //手机号后四位
      code: "",
      picFocusStatus: false
    };
  },
  methods: {
    getData () {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      let position_data;
      if (wx.getStorageSync("province_info")) {
        position_data = JSON.parse(wx.getStorageSync("province_info"));
      }
      console.log(position_data);
      common.fly_post(
        "/api/v4_2/user_wallet/index",
        {
          province_id: position_data.province_id
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.status_code == 0) {
            this.list = res.data;
            this.coin = res.data.extract_credit; //可提现积分
            this.total_already_credit = res.data.total_already_credit;
            this.maxGold = this.list.user_gold;
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    // 去提现
    to_cashOut () {
      let that = this;
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post(
        "/api/com.mmk.member.api.OpenUserWithdrawalsProvider/1.0.0/signedXB.html",
        {
          id: wx.getStorageSync("user_id") || 0
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.code == 0) {
            switch (res.data) {
              case 0:
                // 未签约
                wx.showModal({
                  title: "", //提示的标题,
                  content: "提现需进行进行税务代缴协议签约，是否确定进行签约？", //提示的内容,
                  showCancel: true, //是否显示取消按钮,
                  cancelText: "取消", //取消按钮的文字，默认为取消，最多 4 个字符,
                  cancelColor: "#000000", //取消按钮的文字颜色,
                  confirmText: "确定", //确定按钮的文字，默认为取消，最多 4 个字符,
                  confirmColor: "#F64665", //确定按钮的文字颜色,
                  success: res => {
                    if (res.confirm) {
                      console.log("用户点击确定  去签约");
                      that.to_sign();
                    } else if (res.cancel) {
                      console.log("用户点击取消");
                    }
                  }
                });
                break;
              case 1:
                // 已签约
                //跳转到提现页
                wx.navigateTo({
                  url: "/pages/package_mine/cash_out/main?coin_num=" + this.coin
                });
                break;

              default:
                break;
            }
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        },
        "isJava"
      );
    },
    // 判断是否签约跳转h5
    to_sign () {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post(
        "/api/com.mmk.member.api.OpenUserWithdrawalsProvider/1.0.0/xbApiUserSign.html",
        {
          id: wx.getStorageSync("user_id") || 0
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.code == 0 || res.code == "6001") {
            let ident_url =
              "https://h5.ameimeika.com/Identification/index.html";
            wx.navigateTo({
              url: `/pages/package_mine/sign_contract/main?url=${ident_url}`
            });
          } else if (res.code == "6002") {
            let protocal_url = encodeURIComponent(`https://integration.esign.xinshuiguanjia.com/?accountId=${res.data}`)
            wx.navigateTo({ url: `/pages/advertisement/main?url=${protocal_url}` });
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
              mask: true
            });
          }

          //   switch (res.code) {
          //     case 0:
          //       let protocal_url = encodeURIComponent(`https://integration.esign.xinshuiguanjia.com/?accountId=${res.data}`)
          //       console.log(protocal_url);
          //       wx.navigateTo({ url: `/pages/advertisement/main?url=${protocal_url}` });
          //       break;
          //     case 1007:
          //       let ident_url = 'https://h5.ameimeika.com/Identification/index.html'
          //       wx.navigateTo({ url: `/pages/sign_contract/main?url=${ident_url}` });
          //       break;

          //     default:

          //       wx.hideLoading();
          //       wx.showToast({
          //         title: res.msg,
          //         icon: "none",
          //         duration: 2000,
          //         mask: true
          //       });
          //       break;
          //   }
        },
        "isJava"
      );
    },
    tips () {
      let that = this;
      wx.showModal({
        title: "",
        content: "已累计提现：¥ " + that.total_already_credit,
        showCancel: false,
        confirmText: "我知道了",
        confirmColor: "#FF383E"
      });
    },
    prompt () {
      wx.showModal({
        title: "",
        content: "含有活动积分、补贴积分 ",
        showCancel: false,
        confirmText: "我知道了",
        confirmColor: "#FF383E",
        success: function (res) {
          if (res.confirm) {
          }
        }
      });
    },
    backBtn () {
      wx.navigateBack({
        delta: 1
      });
    },
    get_gold (e) {
      this.jb_num = "";
      this.jb_num = e.target.value;
      if (e.target.value > this.maxGold) {
        return;
      } else {
        this.yb_num = e.target.value * 5;
      }
    },
    exchange () {
      // 去兑换
      this.jb_num = 0;
      this.yb_num = 0;
      this.ismask = true;
      this.isPopup = true;
    },
    focusfns () {
      this.jb_num = "";
    },
    closeBtn () {
      this.code = "";
      this.errTip = false;
      this.ismask = false;
      this.isPopup = false;
      this.msgPopup = false;
    },
    sendEvent () {
      this.code = "";
      this.ismask = true;
      this.msgPopup = true;
      var that = this;
      that.timing = 60;
      that.interval = setInterval(function () {
        if (--that.timing > 0) {
          that.sendMsg = that.timing + "s重新发送";
        } else {
          that.sendMsg = "重新发送";
          // that.isDisabled = false;
          clearInterval(interval);
        }
      }, 1000);
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post(
        "/api/v4_2/order_gold/sms_code",
        {
          phone: this.tel
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.status_code == 0) {
            common.mmk_Loading(2, "短信已发送至你的手机,注意查收");
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    sendMore () {
      //重新发送
      this.sendEvent();
    },
    // 金币兑换银币提交事件
    confirmEvent () {
      common.mmk_Loading(0);
      common.fly_post(
        "/api/v4_2/user_wallet/exchange",
        {
          gold_coin: this.jb_num
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0) {
            this.ismask = false;
            this.isPopup = false;
            this.msgPopup = false;
            common.mmk_Loading(2, "兑换成功");
            setTimeout(() => {
              this.getData();
            }, 1500);
          } else {
            common.mmk_Loading(2, res.msg);
          }
        }
      );
    },
    OnEnter () {
      this.jb_num = "";
    },
    getCode () {
      //验证手机号
      console.log(this.code);
      if (!this.code || this.code.length < 6) {
        return;
      }
      common.mmk_Loading(0);
      common.fly_post(
        "/api/v4_2/order_gold/confirm_code",
        {
          phone: this.tel,
          code: this.code
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0) {
            this.confirmEvent(); //兑换金银币
            this.ismask = false;
            this.msgPopup = false;
          } else if (res.status_code == -1) {
            //验证码错误
            this.errTip = true;
          } else {
            common.mmk_Loading(2, res.msg);
          }
        }
      );
    },
    scroll (e) {
      // console.log(e.mp.detail.scrollTop)
    },
    //轮播图跳转
    to_detail (item) {
      //轮播图跳详情页
      common.to_detail(item);
    },
    // 去提速
    to_speed () {
      wx.navigateTo({
        url: "/pages/package_mine/plus_speed/main"
      })
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: "钱包"
    });
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#FC799A", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    this.tel = wx.getStorageSync("user_data").username;
    this.phone = this.tel.slice(-4);
    console.log(this.phone);
    this.getData();
  },
  onShow () {
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#FC799A", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    this.getData();
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f3f4f6;
  position: relative;
  // 弹窗样式
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
  }
  .Popup {
    width: 89.33%;
    height: 240px;
    position: absolute;
    top: 23%;
    left: 5%;
    background: #fff;
    border-radius: 20px;
    z-index: 10000;
    font-family: PingFangSC-Medium, PingFang SC;
    padding: 20px 20px 0px;
    box-sizing: border-box;
    &.msg_Popup {
      padding-bottom: 20px;
    }
    .title {
      font-size: 18px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      position: relative;
      .closeBtn {
        position: absolute;
        width: 20px;
        height: 20px;
        background: rgba(222, 222, 222, 1);
        top: -8px;
        right: -8px;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
      }
    }
    .describe {
      margin-top: 6px;
      font-size: 12px;
      color: #666;
      margin-bottom: 30px;
    }
    .sendBtn {
      width: auto;
      height: 18px;
      font-size: 12px;
      color: rgba(255, 115, 164, 1);
      position: absolute;
      top: 21.5%;
      right: 20px;
    }
    .inpbox {
      width: 100%;
      display: flex;
      flex-direction: row;
      height: 40px;
      margin: 36px 0px 8px;
      justify-content: space-between;
      position: relative;
    }
    .code-input-input {
      height: 40px;
      line-height: 40px;
      position: absolute;
      width: 300%;
      outline: none;
      color: transparent;
      text-shadow: 0 0 0 transparent;
      margin-left: -100%;
    }
    .code-input-main-item {
      width: 40px;
      height: 40px;
      color: rgba(51, 51, 51, 1);
      opacity: 0.8;
      line-height: 40px;
      text-align: center;
      padding-bottom: 0;
      font-size: 20px;
      background: rgba(243, 244, 246, 1);
      border-radius: 10px;
    }
    .text {
      text-align: center;
      color: rgba(255, 56, 62, 1);
      margin-bottom: 15px;
    }
    .p1 {
      width: 86%;
      font-size: 12px;
      color: rgba(153, 153, 153, 1);
      line-height: 16px;
      margin: 0 auto;
      text-align: center;
    }
    .p2 {
      margin-bottom: 30px;
    }
    .tips {
      font-size: 12px;
      color: rgba(255, 56, 62, 1);
      position: absolute;
      right: 20px;
      top: 39%;
    }
    .jb_inp {
      height: 24px;
      font-size: 16px;
      color: #a5b3b9;
      position: relative;
      box-sizing: border-box;
      padding-left: 24px;
      &.jb_inp1 {
        margin-bottom: 16px;
        color: #f5d040;
      }
      .icon {
        position: absolute;
        width: 18px;
        height: 18px;
        display: block;
        top: 2px;
        left: 0;
      }
      .inp {
        width: 101px;
        height: 24px;
        background: rgba(243, 244, 246, 1);
        border-radius: 5px;
        display: block;
        float: right;
        text-align: center;
        line-height: 24px;
        color: #333;
      }
      .inp1 {
        background: #fff;
      }
    }
    .confirm {
      position: absolute;
      bottom: 0;
      width: 89.3%;
      height: 40px;
      margin: 0 auto;
      color: rgba(51, 51, 51, 1);
      line-height: 40px;
      font-size: 14px;
      border-top: 1px solid #f5f5f5;
      text-align: center;
    }
  }
  .top {
    .nav {
      width: 100%;
      height: 64px;
      margin-bottom: 10px;
      background: transparent;
      background: linear-gradient(226deg, #ff7a8e 0%, #ff77a0 100%);
      position: fixed;
      top: 0;
      z-index: 9999;
      .backBtn {
        width: 10px;
        height: 16px;
        position: absolute;
        top: 53.1%;
        left: 10px;
      }
    }
    width: 100%;
    // height: 348px;
    // margin-top: 60px;
    box-sizing: border-box;
    position: relative;
    background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/wallet/bg_wallet.png")
      no-repeat;
    background-size: 100% 100%;
    border-radius: 0px 0px 10px 10px;
    padding: 75px 10px 20px 0;
    .jbbox {
      display: flex;
      box-sizing: border-box;
      height: 100px;
      font-family: PingFangSC-Medium, PingFang SC;
      color: rgba(255, 255, 255, 1);
      padding-left: 10px;
      &.jbbox1 {
        margin-bottom: 30px;
      }
      .jb_left {
        width: 27%;
        // background: khaki;
        display: inline-block;
        text-align: center;
        margin-right: 8px;
        .p1 {
          font-size: 16px;
          font-weight: 500;
          margin-top: 15px;
          // line-height: 22px;
        }
        .jb_total {
          font-size: 30px;
          font-weight: 600;
          line-height: 42px;
        }
      }
      .jb_right {
        width: 71.2%;
        display: flex;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 15px;
        text-align: center;
        box-sizing: border-box;
        padding: 9px 0;
        // opacity:0.15;
        color: rgba(255, 255, 255, 0.8);
        background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/wallet/bg_frame.png")
          no-repeat;
        background-size: 100% 100%;
        .box {
          width: 50%;
          &.box1 {
            position: relative;
            &::after {
              position: absolute;
              content: "";
              width: 2px;
              height: 26px;
              background: rgba(255, 255, 255, 1);
              border-radius: 1px;
              opacity: 0.3;
              top: 37%;
              right: 0;
            }
          }
          .p1 {
            font-size: 14px;
            position: relative;
            // line-height:20px;
            .icon {
              position: absolute;
              width: 14px;
              height: 14px;
              top: 14%;
              left: 74%;
              &.icon1 {
                left: 63%;
              }
              // vertical-align: middle
            }
          }
          .num {
            font-size: 18px;
            margin-top: 4px;
          }
          .btn {
            width: 56px;
            height: 20px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 1);
            margin: 10px auto 0;
            line-height: 20px;
            font-size: 12px;
          }
        }
      }
    }
  }

  .cashButton {
    width: 70px;
    height: 22px;
    border-radius: 11px;
    background: #fff;
    font-size: 14px;
    color: #ff383e;
    line-height: 22px;
    text-align: center;
    position: absolute;
    right: 14px;
    top: 20px;
  }
  .point {
    width: 175px;
    height: 175px;
    text-align: center;
    background-image: url("https://img.ameimeika.com/h5_images/mp_images/mp_2.9/wallet_circle@3x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 auto 20px;
    box-sizing: border-box;
    padding-top: 40px;
    .p1 {
      font-size: 17px;
      color: rgba(255, 255, 255, 1);
      line-height: 24px;
      .bookimg {
        width: 13px;
        height: 13px;
        display: inline-block;
      }
    }
    .p2 {
      display: inline-block;
      height: 40px;
      width: 100%;
      font-size: 40px;
      color: #fff;
      line-height: 40px;
      margin-bottom: 2px;
      text-shadow: 0px 3px 4px rgba(241, 8, 53, 1);
    }
    .p3 {
      display: inline-block;
      width: 49%;
      height: auto;
      font-size: 12px;
      color: #fff;
      // background: blue;
    }
  }
  .total {
    width: 100%;
    height: 50px;
    display: flex;
    text-align: center;
    color: #fff;
    .left {
      position: relative;
      flex: 1;
      .title {
        font-size: 14px;
        .bookimg {
          width: 13px;
          height: 13px;
          display: inline-block;
        }
      }
      .num {
        font-size: 20px;
        margin-top: 5px;
      }
      &::before {
        content: "";
        width: 1px;
        height: 30px;
        background-color: #fff;
        position: absolute;
        top: 15px;
        right: 1px;
      }
    }
    .right {
      flex: 1;
      &.middle {
        position: relative;
        &::before {
          content: "";
          width: 1px;
          height: 30px;
          background-color: #fff;
          position: absolute;
          top: 15px;
          right: 1px;
        }
      }
      .title {
        font-size: 14px;
      }
      .num {
        font-size: 20px;
        margin-top: 5px;
      }
    }
  }
}
.banner {
  height: 100px;
  margin: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  swiper {
    height: 100%;
  }
  .slide-image {
    width: 100%;
    height: 100%;
  }
}

.text6 {
  width: 100%;
  height: 17px;
  box-sizing: border-box;
  line-height: 17px;
  font-size: 12px;
  color: #888;
  background-color: #fff;
  /* padding: 0 15px */
  margin: 15px 0px;
}
.icon_right {
  width: 18px;
  height: 20px;
  display: inline-block;
  position: absolute;
  right: 2.5%;
  top: 27.2%;
}
.speed_btn {
  // width: 84px;
  text-align: center;
  position: absolute;
  right: 8%;
  top: 27.2%;
  font-size: 12px;
  font-weight: 500;
  height: 22px;
  color: #666;
  line-height: 22px;
  // background: rgba(255, 56, 62, 0.12);
  // border-radius: 11px;
}
.ul_box {
  margin: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  padding-left: 14px;
}
.row {
  height: 44px;
  font-size: 14px;
  box-sizing: border-box;
  padding: 0 15px 0px 34px;
  line-height: 44px;
  color: #444;
  font-weight: 700;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
  position: relative;
  .icon {
    position: absolute;
    top: 33%;
    left: 0;
  }
  .icon1,
  .icon3,
  .icon4 {
    width: 20px;
    height: 16px;
  }
  .icon2 {
    width: 20px;
    height: 18px;
  }
}
.tip1 {
  width: 92%;
  height: auto;
  box-sizing: border-box;
  padding: 15px 0;
  line-height: 21px;
  margin: 0 auto;
}
.tip {
  box-sizing: border-box;
  padding: 0 15px;
  font-size: 12px;
  line-height: 17px;
  color: #999;
}
.tip2 {
  margin-bottom: 40px;
}
</style>

